<template>
  <view class="container">
    <view class="prescriptions-list">
      <view v-if="prescriptions.length === 0" class="empty-state">
        <van-empty description="暂无处方记录" />
      </view>

      <van-card
        v-for="prescription in prescriptions"
        :key="prescription.id"
        :title="`处方单号：${prescription.prescriptionNo}`"
        :desc="`${prescription.doctorName} | ${prescription.date}`"
        :price="`￥${prescription.totalPrice}`"
      >
        <template #thumb>
          <view class="prescription-icon">
            <van-icon name="description" color="#ff6b35" size="24" />
          </view>
        </template>

        <template #tags>
          <van-tag :type="getStatusType(prescription.status)">
            {{ prescription.status }}
          </van-tag>
        </template>

        <template #footer>
          <view class="card-actions">
            <van-button
              size="small"
              type="primary"
              plain
              @click="viewDetail(prescription)"
            >
              查看详情
            </van-button>
            
            <van-button
              v-if="prescription.status === '待取药'"
              size="small"
              @click="confirmPickup(prescription)"
            >
              确认取药
            </van-button>
          </view>
        </template>
      </van-card>
    </view>

    <!-- 处方详情弹窗 -->
    <van-popup
      v-model:show="showDetail"
      position="bottom"
      :style="{ height: '70%' }"
      closeable
      @close="showDetail = false"
      @click-overlay="showDetail = false"
    >
      <view class="detail-popup" v-if="selectedPrescription">
        <view class="detail-title">处方详情</view>
        
        <scroll-view class="detail-content" scroll-y>
          <van-cell-group>
            <van-cell title="处方单号" :value="selectedPrescription.prescriptionNo" />
            <van-cell title="开方医生" :value="selectedPrescription.doctorName" />
            <van-cell title="开方时间" :value="selectedPrescription.date" />
            <van-cell title="处方状态" :value="selectedPrescription.status" />
          </van-cell-group>
          
          <van-divider>药品清单</van-divider>
          
          <van-cell-group>
            <van-cell
              v-for="(medicine, index) in selectedPrescription.medicines"
              :key="index"
              :title="medicine.name"
              :label="`规格：${medicine.spec} | 用法：${medicine.usage}`"
              :value="`数量：${medicine.quantity} | ￥${medicine.price}`"
            >
              <view class="medicine-detail">
                <view class="medicine-dosage">用量：{{ medicine.dosage }}</view>
                <view class="medicine-frequency">频次：{{ medicine.frequency }}</view>
                <view class="medicine-duration">疗程：{{ medicine.duration }}</view>
              </view>
            </van-cell>
          </van-cell-group>
          
          <van-cell-group>
            <van-cell title="药品总价" :value="`￥${selectedPrescription.totalPrice}`" />
            <van-cell title="医保支付" :value="`￥${selectedPrescription.insurancePayment}`" />
            <van-cell title="自费金额" :value="`￥${selectedPrescription.selfPayment}`" />
          </van-cell-group>
          
          <view v-if="selectedPrescription.notes" class="prescription-notes">
            <van-cell title="医生嘱咐" :value="selectedPrescription.notes" />
          </view>
        </scroll-view>
        
        <view class="detail-actions">
          <van-button
            type="primary"
            plain
            @click="downloadPrescription"
          >
            下载处方
          </van-button>
          <van-button @click="sharePrescription">
            分享处方
          </van-button>
        </view>
      </view>
    </van-popup>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

interface Medicine {
  name: string;
  spec: string;
  quantity: number;
  price: number;
  dosage: string;
  frequency: string;
  duration: string;
  usage: string;
}

interface Prescription {
  id: number;
  prescriptionNo: string;
  doctorName: string;
  date: string;
  status: '待取药' | '已取药' | '已过期';
  totalPrice: number;
  insurancePayment: number;
  selfPayment: number;
  medicines: Medicine[];
  notes?: string;
}

const showDetail = ref(false);
const selectedPrescription = ref<Prescription | null>(null);

const prescriptions = ref<Prescription[]>([
  {
    id: 1,
    prescriptionNo: "CF202401150001",
    doctorName: "张医生",
    date: "2024-01-15",
    status: "待取药",
    totalPrice: 85.6,
    insurancePayment: 65.2,
    selfPayment: 20.4,
    medicines: [
      {
        name: "阿莫西林胶囊",
        spec: "0.25g*24粒",
        quantity: 2,
        price: 31.6,
        dosage: "0.5g",
        frequency: "每日3次",
        duration: "7天",
        usage: "饭后服用"
      },
      {
        name: "布洛芬缓释胶囊",
        spec: "0.3g*10粒",
        quantity: 1,
        price: 25.0,
        dosage: "0.3g",
        frequency: "每日2次",
        duration: "5天",
        usage: "饭后服用"
      },
      {
        name: "维生素C片",
        spec: "0.1g*100片",
        quantity: 1,
        price: 29.0,
        dosage: "0.2g",
        frequency: "每日3次",
        duration: "10天",
        usage: "饭后服用"
      }
    ],
    notes: "按时服药，多休息，多饮水。如症状加重请及时复诊。"
  },
  {
    id: 2,
    prescriptionNo: "CF202401080001",
    doctorName: "李医生",
    date: "2024-01-08",
    status: "已取药",
    totalPrice: 156.8,
    insurancePayment: 120.3,
    selfPayment: 36.5,
    medicines: [
      {
        name: "头孢克肟分散片",
        spec: "0.1g*6片",
        quantity: 2,
        price: 57.2,
        dosage: "0.2g",
        frequency: "每日2次",
        duration: "7天",
        usage: "饭后服用"
      },
      {
        name: "奥美拉唑肠溶胶囊",
        spec: "20mg*14粒",
        quantity: 1,
        price: 45.6,
        dosage: "20mg",
        frequency: "每日1次",
        duration: "14天",
        usage: "饭前服用"
      },
      {
        name: "胃复安片",
        spec: "5mg*100片",
        quantity: 1,
        price: 54.0,
        dosage: "10mg",
        frequency: "每日3次",
        duration: "7天",
        usage: "饭前服用"
      }
    ],
    notes: "注意饮食清淡，避免辛辣刺激食物。"
  }
]);

const getStatusType = (status: string) => {
  switch (status) {
    case "待取药":
      return "warning";
    case "已取药":
      return "success";
    case "已过期":
      return "danger";
    default:
      return "default";
  }
};

const viewDetail = (prescription: Prescription) => {
  selectedPrescription.value = prescription;
  showDetail.value = true;
};

const confirmPickup = (prescription: Prescription) => {
  uni.showModal({
    title: "确认取药",
    content: "确定已经取药了吗？",
    success: (res) => {
      if (res.confirm) {
        prescription.status = "已取药";
        uni.showToast({
          title: "状态更新成功",
          icon: "success"
        });
      }
    }
  });
};

const downloadPrescription = () => {
  uni.showToast({
    title: "下载功能开发中",
    icon: "none"
  });
};

const sharePrescription = () => {
  uni.showToast({
    title: "分享功能开发中",
    icon: "none"
  });
};

onLoad(() => {
  console.log("历史处方页面 onLoad");
});
</script>

<style lang="scss">
.container {
  background-color: #f8f9fa;
  min-height: 100vh;
}

.prescriptions-list {
  padding: 16rpx;
}

.prescription-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  background: #fff7e6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-actions {
  display: flex;
  gap: 16rpx;
}

.empty-state {
  padding: 100rpx 0;
}

.detail-popup {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.detail-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  padding: 32rpx;
  border-bottom: 1rpx solid #eee;
}

.detail-content {
  flex: 1;
  padding: 16rpx 0;
}

.medicine-detail {
  font-size: 24rpx;
  color: #666;
  margin-top: 8rpx;
  
  > view {
    margin-bottom: 4rpx;
  }
}

.prescription-notes {
  margin-top: 16rpx;
}

.detail-actions {
  padding: 24rpx 32rpx;
  border-top: 1rpx solid #eee;
  display: flex;
  gap: 24rpx;
  
  .van-button {
    flex: 1;
  }
}
</style>